<template>
    <footer class="fo">
      <router-link to="/home">
        <i class="iconfont icon-home"></i>
         <span>首页</span>
      </router-link>
      <router-link to="/list">
        <i class="iconfont icon-liebiao"></i>
         <span>列表</span>
      </router-link>
      <router-link to="/collect">
        <i class="iconfont icon-shoucang"></i>
         <span>收藏</span>
      </router-link>
      <router-link to="/add">
        <i class="iconfont icon-tianjia"></i>
         <span>添加</span>
      </router-link>
      <!--<router-link to="/"></router-link>-->
    </footer>
</template>
<style scoped lang="scss">
  .fc{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
  }
.fo{
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  height:0.7rem;
  border:thin solid #ccc;
  display:flex;
  z-index:9;
  a{
    flex:1;
    @extend .fc;
    flex-direction:column;
    color:#666;
    &:focus{text-decoration:none;}
  }
  /*激活的颜色*/
  a.router-link-exact-active{
    color:#AFDF2E;
  }
}
</style>
